<!-- 新闻资讯 -->
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useOffSetTopStore } from '@/stores/modules/offsetTop'
import { getDefUpdatesAPI } from '@/api/NewUpdates'

// 仓库
const offsetTopStore = useOffSetTopStore()

const KnowledgeBaseBox = ref()
const offsetTop = ref(0)

// 获取距离顶部距离，并存入仓库
const getOffsetTop = () => {
  offsetTop.value = KnowledgeBaseBox.value.offsetTop
  offsetTopStore.setOffSetTop('N', offsetTop.value)
}

// 滚动动画
const windowHeader = (window.innerHeight / 5) * 4
const isShow = ref(false)
const checkBoxes = () => {
  const boxTop = KnowledgeBaseBox.value.getBoundingClientRect().top - 75

  if (boxTop < windowHeader) {
    isShow.value = true
    // 触发后消除事件，减少性能损耗
    window.removeEventListener('scroll', checkBoxes)
  }
}

// 请求数据
const defUpdates = ref()
const getDefUpdatesData = async () => {
  const res = await getDefUpdatesAPI()
  defUpdates.value = res
  console.log(defUpdates.value)
}

const isActive1 = ref(true)
const isActive2 = ref(false)
const isDelay = ref(true)

const isaddActive = () => {
  // 注意不要绑给upmodule，upmodule是通过内边距制造隔开效果的，所以空白区域也会触发
  const newMessages = document.querySelectorAll('.new-message')

  newMessages.forEach((upmodule, idx) => {
    if (idx <= 2) {
      upmodule.addEventListener('mouseenter', () => {
        isDelay.value = false
        isActive1.value = true
        isActive2.value = false
      })
    } else {
      upmodule.addEventListener('mouseenter', () => {
        isDelay.value = false
        isActive2.value = true
        isActive1.value = false
      })
    }
  })
}

onMounted(() => {
  getOffsetTop()
  getDefUpdatesData()
  window.addEventListener('scroll', checkBoxes)
  isaddActive()
})
</script>

<template>
  <div ref="KnowledgeBaseBox" class="box">
    <div class="wrapper">
      <el-header :class="{ show: isShow }">
        <h1>新闻资讯</h1>
        <p>实时观察行业视觉，及时了解行业动态</p>
      </el-header>
      <el-main>
        <div class="rowbox">
          <div
            class="upmodule"
            v-for="item in 6"
            :key="item"
            :class="{ show: isShow, active: item <= 3 ? isActive1 : isActive2 }"
            :style="{
              transitionDelay: isDelay ? `${(item - 1) * 200}ms` : ''
            }"
          >
            <div
              class="new-message"
              @click="
                $router.push({
                  path: '/ParticularsKnowledge',
                  query: { id: 'N' }
                })
              "
            >
              <div class="top">
                <h3>2024-4-28</h3>
              </div>
              <div class="bottom">
                <h3>关于2024年劳动节放假的通知</h3>
                <p>
                  根据国家相关规定，劳动节假期安排如下：2024年5月1日至5月3日放假，共计3天。5月4日（星期六）正常上班。32132132
                </p>
                <p>2024-4-28</p>
              </div>
            </div>
          </div>
        </div>
        <div
          class="bbtn"
          @click="$router.push({ path: './MoreKnowledge', query: { id: 'N' } })"
        >
          查看更多
        </div>
      </el-main>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
.box {
  ::-webkit-scrollbar {
    display: none;
  }
  box-sizing: border-box;
  min-width: 1270px;
  height: 880px;
  padding: 40px 0;
  background-color: #271a0e;
  .el-header {
    // 如果 transition 加了条件 transform，那么就只会对 transform 属性渐变，其他属性不渐变，注意
    // transition: transform .6s ease;
    transition: all 0.6s ease;
    transform: translateY(100px);
    text-align: center;
    padding: 18px;
    width: 100%;
    height: 100px;
    h1 {
      font-size: 32px;
      font-weight: 400;
      margin-bottom: 10px;
      color: #ffffffda;
    }
    p {
      font-size: 16px;
      color: #c5c3c3;
    }
  }
  .el-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .rowbox {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      // 不希望区域被移动时被鼠标拖动
      overflow: hidden;
    }
    .upmodule {
      width: 400px;
      transition: all 0.6s ease;
      transform: translateY(300px);
      box-sizing: border-box;
      padding: 17px 10px;
      cursor: pointer;
      opacity: 0;
      &:nth-child(1) {
        .new-message {
          .top {
            // 这里必须得用背景图而不能用img标签，因为背景图能更高的随高度变化
            background: url('https://plus.unsplash.com/premium_photo-1728930379607-8fd9749ed900?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
              no-repeat center / cover;
          }
        }
      }
      &:nth-child(2) {
        .new-message {
          .top {
            background: url('https://images.unsplash.com/photo-1729731321955-6316b2fe17f0?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
              no-repeat center / cover;
          }
        }
      }
      &:nth-child(3) {
        .new-message {
          .top {
            background: url('https://images.unsplash.com/photo-1729756760480-b9f5ee9f352f?q=80&w=2576&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
              no-repeat center / cover;
          }
        }
      }
      &:nth-child(4) {
        .new-message {
          .top {
            background: url('https://images.unsplash.com/photo-1728662965625-6838648b8198?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
              no-repeat center / cover;
          }
        }
      }
      &:nth-child(5) {
        .new-message {
          .top {
            background: url('https://images.unsplash.com/photo-1728785954407-03ded8e30ff3?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
              no-repeat center / cover;
          }
        }
      }
      &:nth-child(6) {
        .new-message {
          .top {
            background: url('https://images.unsplash.com/photo-1729010733312-4f2caeca0715?q=80&w=2535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
              no-repeat center / cover;
          }
        }
      }
      .new-message {
        border: 1px solid rgba(118, 121, 129, 0.2);
        width: 100%;
        height: 100%;
        transition: all 0.6s ease;
        &:hover {
          box-shadow: 3px 3px 13px rgb(118, 121, 129);
        }
        .top {
          height: 0;
          // 打开效果不是盒子的高渐变，而只是顶部图片盒子高度的渐变
          transition: all 0.6s ease;
          // 这里也是一个溢出隐藏的应用，盒子内的h3和img都不变，只是盒子高度的变化+溢出隐藏，里面的元素体积还在，但被隐藏了，视觉上相当于不在
          overflow: hidden;
          h3 {
            display: block;
            width: 110px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            background: #e31111;
            font-size: 14px;
            font-weight: 400;
            color: #fff;
            padding: 0;
          }
        }
        .bottom {
          // 下面这里就不用渐变了，这个日期渐变不好看
          padding: 20px 20px 0;
          height: 142px;
          overflow: hidden;
          background-color: #ffffffda;
          h3 {
            font-size: 16px;
            font-weight: 800;
            line-height: 18px;
            margin-bottom: 12px;
          }
          p {
            display: block;
            font-size: 14px;
            line-height: 1.5;
            color: #797979;
            // 溢出显示省略号，步骤截图放在同名文件夹内了
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          p:nth-child(3) {
            display: block;
            margin-top: 15px;
          }
        }
      }
    }
    .upmodule.active {
      width: 400px;
      .new-message {
        .top {
          height: 230px;
        }
        .bottom {
          height: 116px;
          p:nth-child(3) {
            height: 0;
          }
        }
      }
    }
    .bbtn {
      margin-top: 35px;
      width: 120px;
      height: 35px;
      padding: 0 30px;
      background-color: red;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.6s;
      &:hover {
        background-color: #d01313;
      }
    }
  }
}
</style>
